<script setup lang="ts">
import { ref,} from 'vue'
//1.自动推导 - 维护一个列表
const list = ref([
  {
    startCount:50000,
    name:'vue'
  },
  {
    startCount:60000,
    name:'react'
  }
])

// 2. 泛型显示指定类型
//先定义内容类型,在定义外部类型
type Item  = {
  startCount:number,
  name:string
}
const list1  = ref<Item[]>([
  {
    startCount:50000,
    name:'vue'
  },
  {
    startCount:60000,
    name:'react'
  }
])



// 添加一个新项
const addHandle1 = ()=>{
    list.value.push({
    startCount:70000,
    name:'angular'
    })
}
const addHandle2 = ()=>{
    list1.value.push({
    startCount:80000,
    name:'nuxt'
    })
}
</script>

<template>
  <div>
    <ui>
      <li v-for="item in list" :key="item.name">
        {{ item.name }} -- {{ item.startCount }}
      </li>
      <button @click="addHandle1">添加1</button>
    </ui>
    <hr>
    <ui>
      <li v-for="item in list1" :key="item.name">
        {{ item.name }} -- {{ item.startCount }}
      </li>
      <button @click="addHandle2">添加2</button>
    </ui>
  </div>
</template>

